<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        家长反馈
      </p>
      <Row type="flex" justify="space-between">
        <div>
          家长：
          <Input v-model="searchparam.kinsfolkName" @on-change="queryFn" placeholder="家长姓名关键字"
                 style="width: 130px;margin-right: 4px;"/>
          <div class="db_inline">
            状态：
            <Select v-model="searchparam.read" style="width:80px" @on-change="queryFn">
              <Option v-for="item in readList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
          <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table :height='tableHeight' ref="backgroundTable" :columns="dataColumns" :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
    </Card>

    <Modal v-model="details.visible" :title="details.title" width="450">
      <div style="line-height: 30px;font-size: 16px">
        <Row>
          <div style="height: 350px">
            <div>&nbsp;&nbsp;&nbsp;&nbsp;{{details.list.content}}</div>
            <div style="position: relative;left: 230px;top: 250px;font-size: 14px">
              <div>反馈人：{{details.list.kinsfolkName}}</div>
              <div>时间：{{details.list.createTime}}</div>
            </div>
          </div>
        </Row>
      </div>
      <div slot="footer">
        <Button type="primary" @click="submitFn">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import vueUpload from "@/components/views/upload/Upload";
  import Cookie from "js-cookie"

  export default {
    name: "Background",
    components: {
      VmBtable,
      vueUpload,
    },
    data() {
      return {
        cutHeight: 280,
        tableHeight: 640,
        details: {
          title: '',
          visible: false,
          list: []
        },
        readList: [{
          id: '',
          name: '全部'
        },
          {
            id: 1,
            name: '已读'
          },
          {
            id: 0,
            name: '未读'
          },
        ],
        searchTitle: '',
        loginType: Cookie.getJSON('loginType'),
        searchparam: {
          current: 1,
          size: 20,
          kinsfolkName: '',
          read: '',
        },
        dataColumns: [
          {
            type: 'index',
            title: '序号',
            align: 'center',
            minWidth: 60
          },
          {
            title: '标题',
            key: 'title',
            minWidth: 160,
            align: 'center'
          },
          {
            title: '家长名',
            key: 'kinsfolkName',
            minWidth: 160,
            align: 'center'
          },
          {
            title: '反馈时间',
            key: 'createTime',
            minWidth: 100,
            align: 'center',
            sortable: true,
            sortType: 'desc'
          },
          {
            title: '状态',
            key: 'read',
            minWidth: 150,
            align: 'center',
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let desc = '未读';
              if (params.row.read) {
                desc = '已读';
              }
              return h('div', {}, desc);
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 160,
            render: (h, params) => {
              let btn = [];
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailFn(params.row)
                  }
                }
              }, '详情');
              btn.push(detailBtn);
              return h('div', btn);
            }
          }
        ],
        dataTable: [],
      }
    },
    methods: {
      queryFn() {
        API.fetchFeedback(this.searchparam).then(resp => {
          this.dataTable = resp.data.records;
          this.searchparam.total = resp.data.total;
          this.searchparam.current = resp.data.current;
        })
      },
      pageChange(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
      restFn() {
        this.searchparam.kinsfolkName = '';
        this.searchparam.read = null;
        this.queryFn();
      },
      detailFn(data) {
        this.details.visible = true;
        Object.assign(this.details, {
          visible: true,
          title: '反馈详情',
          list: data
        })
        API.readFeedback({id: data.id});
      },
      cancelFn() {
      },
      complete() {
      },
      submitFn() {
        this.details.visible = false;
        this.queryFn();
      },
      setHeight() {
        this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
      }
    },
    mounted() {
      this.queryFn();
      this.setHeight();
    }
  }
</script>

<style scoped>

</style>
